
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>相亲寻缘-成都田水鱼网络科技有限公司</title>
    <script src="./js/jquery.min.js"></script>
    <script src="./js/common.js"></script>
    <script src="./js/info.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            width: 100vw;
            height: 100vh;
            position: relative;
        }

        #app {
            height: 100%;
            width: 100%;
            /* max-width: 720px; */
            max-width: 480px;
            /* max-height: 1282px; */
            max-height: 860px;
            background-image: url("./imgs/beij2.png");
            /* background-size: cover; */
            background-size: 100% 100%;
            background-position: center;
            background-repeat: no-repeat;
            position: relative;
            left: 50%;
            top: 50%;
            transform: translateX(-50%) translateY(-50%);
        }

        .top {
            position: absolute;
            width: 88%;
            height: 77px;
            left: 50%;
            top: 4%;
            transform: translateX(-50%);
            display: flex;
            justify-content: space-between;

        }

        .item {
            width: 80px;
            height: 80px;
            background-color: #fff;
            border-radius: 10px;
            font-size: 14px;
            color: #333333;
            text-align: center;
        }

        .item img {
            position: relative;
            top: -5%;
            transform: scale(0.5);
        }

        .item .text {
            position: relative;
            bottom: 15%;
        }

        .box{
            background-color: #f0f0f0;
            width: 98%;
            position: absolute;
            top: 16%;
            bottom: 5%;
            left: 50%;
            transform: translateX(-50%);
            border-radius: 10px;
            overflow: auto;
        }

        .list{
            width: 95%;
            margin: 10px auto;
            padding: 10px;
            background-color: #fff;
            position: relative;
        }

        .left{
            width: 60px;
            height: 60px;
            border-radius: 50%;
        }

        .right{
            display: inline-block;
            vertical-align: top;
            padding-left: 20px;
        }

        .rightName{
            font-weight: 700;
        }

        .right span{
            font-size: 14px;
            padding: 4px 8px;
            background-color: #eef3ff;
            margin-right: 8px;
            border-radius: 4px;
            color: #5476dc;
        }

        .sel {
            margin-left: 12px;
        }

        .c {
            color: #848384;
            font-size: 14px;
            margin: 5px 0;
        }

        .btnImg {
            width: 50px;
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
        }

        .btnTxt {
            position: absolute;
            right: 20px;
            top: 50%;
            transform: translateY(-50%);
            color: #fff;
        }

        .tb {
            width: 10px;
            height: 10px;
        }

        a:link {color: blue; text-decoration:none;}
        a:active {color: red; }
        a:visited {color:purple;text-decoration:none;}
        a:hover {color: red; text-decoration:underline;}
    </style>
</head>
<body>
<div id="app">
    <div class="top">
        <a href="./xunYuan.html">
            <div class="item">
                <img src="./imgs/tb01.png" alt="">
                <div class="text">寻缘（80*65）</div>
            </div>
        </a>
        <a href="./xiangQin.html">
            <div class="item">
                <img src="./imgs/tb01.png" alt="">
                <div class="text">相亲</div>
            </div>
        </a>
        <a id="baoming">
            <div class="item">
                <img src="./imgs/tb01.png" alt="">
                <div class="text">相亲报名</div>
            </div>
        </a>
        <div class="item">
            <img src="./imgs/tb01.png" alt="">
            <div class="text">下载</div>
        </div>
    </div>

    <div class="box" @scroll="handleScroll">
        <div>
            <span class="sel">
                <select id="province">
                    <option value="-1">请选择</option>
                </select>
            </span>
            <span>
                <select id="city" onchange="selCity()"></select>
            </span>
            <span class="sel">
                <select name="sex" id="sex" onchange="selSex()">
                    <option value="女">女士</option>
                    <option value="男">男士</option>
                </select>
            </span>
            <span class="sel">
                <select name="bmf" id="bmf" onchange="selBmf()">
                    <option value="报名费优先">报名费优先</option>
                    <option value="注册优先">注册优先</option>
                </select>
            </span>
        </div>
        <div id="div1" style="height: 100%;overflow-y:scroll;">
            <div id="list"></div>
        </div>
    </div>

</div>
</body>
<script>
    var spsl = 1;
    var mbid = 0;
    var AA = 0;
    var AB = 0;

    function selCity() {
        var sb = getDeviceId();
        mbid = $("#city").val();
        search(false, sb, spsl, mbid, AA, AB);
    }
    function selSex() {
        var sb = getDeviceId();
        AA = $("#sex").val();
        search(false, sb, spsl, mbid, AA, AB);
    }
    function selBmf() {
        var sb = getDeviceId();
        AB = $("#bmf").val();
        search(false, sb, spsl, mbid, AA, AB);
    }

    $(function() {
        var sb = getDeviceId();

        search(true, sb,spsl,mbid,AA,AB);

        var winH = $('#div1').height();//页面可视区域高度
        var p=0, t=0; // 顶部和底部的距离

        $('#div1').scroll(function() {
            var pageH = $('#list').height(); //当前文档总高度
            var scrollT = $('#div1').scrollTop();  //滚动条top的值
            var bottomH = (pageH - winH - scrollT) / winH;  // 当前所滚动位置到底部距离
            p = $(this).scrollTop(); //顶部距离
            console.log(p);
            if(t <= p){ // 判断是否下滚
                if (bottomH < 0.01) {
                    spsl++;
                    search(true, sb,spsl,mbid,AA,AB);
                }
            }
            setTimeout(function(){t = p;},2000);//延时2秒
        });

        var province = document.getElementById('province'); //获取省份元素对象
        createOption(province, provinceArr);

        //选择省份后，自动生成对应城市的下拉菜单
        var city = document.getElementById('city');  //获取城市下拉菜单的元素对象
        province.onchange = function() {              //为省份下拉菜单添加事件
            city.options.length = 0;                 //清空city下的所有原有option
            createOption(city, cityArr[province.value]);
            if(province.value >=0){
                city.onchange();
            }else{
                country.options.length = 0;
            }
        }

        $.ajax({
            url: "http://jk.xmll.xyz/jk/jkFl/xq.ashx?id=2&sb=" + sb, // 请求的URL
            type: "POST", // 请求类型，默认为GET
            dataType: "json", // 预期服务器返回的数据类型
            success: function(response) { // 请求成功时的回调函数
                console.log(response)
                if (response.code == 1) {
                    $("#baoming").attr('href', "./baoming.html?id="+response.S0)
                } else {
                    // 未登录，跳转登录
                    window.location.href = "./login.html"
                }
            },
            error: function(xhr, status, error) { // 请求失败时的回调函数
                console.error(error); // 在控制台打印错误信息
            }
        });
    });

    //自动创建省份下拉菜单
    function createOption(obj,data){        //obj表示下拉菜单的元素对象，data表示数组保存的下拉菜单选项
        for(var i in data) {                 //也可以写成for(let i =0;i<data.length;i++)
            var op = new Option(data[i],i); //创建下拉菜单中的option
                                            //Option的第一个参数用于设置显示的文本，第二个参数用于设置value值
            obj.options.add(op);            //将选项添加到下拉菜单中
        }
    }

    function watch2(s) {
        alert(s);
    }

    function search(appendFlag, sb, spsl, mbid, AA, AB) {
        var url = "http://jk.xmll.xyz/jk/jkFl/xq.ashx?id=7&sb=" +
            sb + "&spsl=" + spsl + "&mbid=" + mbid +
            "&AA=" + AA + "&AB=" + AB;
        $.ajax({
            url: url, // 请求的URL
            type: "POST", // 请求类型，默认为GET
            dataType: "json", // 预期服务器返回的数据类型
            success: function(response) { // 请求成功时的回调函数
                if (response.code == 1) {
                    console.log(response.MM); // 在控制台打印服务器返回的数据
                    var listStr = "";
                    $.each(response.MM, function(index, data){
                        listStr += '<div class="list">\n' +
                            '                <img src="'+data.S2+'" alt="" srcset="" class="left">\n' +
                            '                <div class="right"><div class="rightName">'+data.S3+'[已实名]</div>\n' +
                            '                    <div class="c">\n' +
                            '                        '+data.S4+'\n' +
                            '                    </div>\n' +
                            '                    <div class="c" onclick="watch2(\''+data.S7+data.S9+data.S11+data.S13+data.S15+'\')">\n' +
                            '                    <span>\n' +
                            '                        <img class="tb" src="'+data.S6+'">\n' +
                            '                    </span>\n' +
                            '                        <span>\n' +
                            '                        <img class="tb" src="'+data.S8+'">\n' +
                            '                    </span>\n' +
                            '                        <span>\n' +
                            '                        <img class="tb" src="'+data.S10+'">\n' +
                            '                    </span>\n' +
                            '                        <span>\n' +
                            '                        <img class="tb" src="'+data.S12+'">\n' +
                            '                    </span>\n' +
                            '                        <span>\n' +
                            '                        <img class="tb" src="'+data.S14+'">\n' +
                            '                    </span>\n' +
                            '                    </div>\n' +
                            '                    <img src="./imgs/5.png" class="btnImg">\n' +
                            '                    <div class="btnTxt" onclick="watch('+data.S1+')">查看</div>\n' +
                            '                </div>\n' +
                            '            </div>'
                    });
                    if (appendFlag) {
                        $("#list").append(listStr);
                    } else {
                        $("#list").html("");
                        $("#list").append(listStr);
                    }
                }
            },
            error: function(xhr, status, error) { // 请求失败时的回调函数
                console.error(error); // 在控制台打印错误信息
            }
        });
    }

    function watch(id) {
        window.location.href = "./xiangQinDetail.html?id=" + id;
    }

</script>
</html>
